import {Component} from "react";
import React from "react";
import API from '../untils/api'
import Untils from '../untils/untils'
import Bscroll from 'better-scroll';
import {is, fromJS} from 'immutable'
import {connect} from 'react-redux'
import '../css/App.css';
import store from "../store/store";

class Article extends Component {
    constructor() {
        super();
        this.state = {
            detail: {},
            titleStyle: {},
            scroll: null
        };
        this.goBack = this.goBack.bind(this);
    }

    render() {
        return (
            <div className="container">
                <div className="zx-title">
                    <i onClick={this.goBack}></i>
                    <span>{this.state.detail.title}</span>
                </div>
                <div className="zx-content" ref='zxContent'>
                    <div>
                        <div className="article-title" style={this.state.titleStyle}>
                            <span>{this.state.detail.tradeArea}</span>
                            <span>{this.state.detail.type}</span>
                            <span>{this.state.detail.createTime}</span>
                        </div>
                        <div className="zx-article" dangerouslySetInnerHTML={{__html: this.state.detail.memo}}>

                        </div>
                    </div>
                </div>

            </div>
        )
    }

    componentDidMount() {
        let id = Untils.getQueryString('id') || this.props.id;
        let params = {
            data: {
                id: id,
            },
            url: '/huoban-sales/http/sales/function/product/findById.do',
            showLoading: true
        };
        API.request(params).then((res) => {
            let data = res.data;
            data && this.setState({
                detail: {
                    title: data.goldTitle,
                    tradeArea: data.shop_name,
                    type: data.type,
                    createTime: data.createTime,
                    memo: data.memo
                }
            }, () => {
                setTimeout(() => {
                    this.initScroll();
                }, 800)
            });
        })
    }

    goBack() {
        if (this.props.path == '/do') {
            this.props.hideDetail()
        } else {
            store.dispatch({
                type: "HIDE_HEAD"
            });
            this.props.history.goBack();

        }
    }

    initScroll() {

        let scroll = new Bscroll(this.refs.zxContent, {
            probeType: 1,
            click: true,
            scrollY: true
        });
        this.setState({
            scroll: scroll
        });

    }


    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState));
    }
    componentWillReceiveProps(){
        this.state.scroll&&this.state.scroll.refresh()
    }


}

export default connect()(Article);